<template>
	<view class="app-components-order-goods-card-item e-flex e-p-20" @tap="jump(goodsLink, { id: info.prodId || info.commodityId || info.serviceId })">
		<view class="e-m-r-20">
			<load-image mode="aspectFill" :size="['200rpx']" :src="getProperty(info, goodsKeys.image)"></load-image>
		</view>
		<view class="e-flex-1">
			<view class="e-m-b-10 e-flex e-flex-items-start e-flex-between">
				<view class="app-components-order-goods-card-item__title e-line-2 ">
					<text>{{ getProperty(info, goodsKeys.name) }}</text>
				</view>
				<view >
					<text class="e-font-20">{{ $unitEn }}</text>
					<text class="fw-500">{{ getProperty(info, goodsKeys.price) }}</text>
				</view>
			</view>
			
			<view class="e-flex e-flex-between e-m-b-20">
				<text class="c-secondary e-font-26">{{ getProperty(info, goodsKeys.skuName) }}</text>
				<view class="e-m-l-30 c-secondary e-font-26">X{{ getProperty(info, goodsKeys.qry) }}</view>
			</view>
			
			<view class="e-flex e-flex-end">
				<view @tap.stop>
					<slot ></slot>
				</view>
			</view>
			<view class="e-flex e-p-b-20 e-p-r-20 e-p-t-10 c-placeholder e-font-24" v-if="info.orderRefundMsg">
				<view class="e-p-r-10">{{ $t('order.退款原因') }}:</view>
				<view class="e-flex-1">
					{{ info.orderRefundMsg }}
				</view>
			</view>
		</view>
	</view>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
	name: 'order-goods-card-item',
	// #ifdef MP-WEIXIN
	// 将自定义节点设置成虚拟的，更加接近Vue组件的表现
	options: {
		virtualHost: true
	}
	// #endif
});
</script>
<script setup lang="ts">
	import type {  OrderGoods, OrderItem } from '@/common/request/api';
	import { useCurrentInstance } from '@/common/hooks';
	import { getProperty } from '@/common/utils';
	
	const props = withDefaults(
		defineProps<{
			// 商品列表
			info: Partial<OrderGoods['deputys'][0] & OrderItem>
			// 商品信息的键值
			goodsKeys?: {
				image: string;
				skuName: string;
				skuId: string;
				price: string;
				name: string;
				qry: string;
			};
			// 点击商品时跳转的地址
			goodsLink?: string;
			// 点击商品事件
			isJump?: boolean;
		}>(),
		{}
	);
	
	const ctx = useCurrentInstance();
	// 跳转页面
	const jump = (url: string, params: Record<string, string | number | undefined>) => {
		if (props.isJump) {
			ctx.$goTo(url, params);
		}
	};
</script>

<style lang="scss" scoped>
@include appBem_b(components-order-goods-card-item) {
	@include appBem_e(title){
		flex:0 0 320rpx;
		line-height: 40rpx;
		height: 80rpx;
	}
}
</style>